<template>
    <div class="personalCenter-wrapper">
        <image class="setting" :src="imgPath('account_setting.png')" @click="jumpTo('/account/accountSetting')"></image>
        <image class="notice" :src="imgPath('notice.png')" @click="jumpTo('/message')"></image>
        <scroller class="scroll" show-scrollbar="false">
            <div class="info-wrapper">
                <image class="info-bg" :src="imgPath('personal_bg.png')"></image>
                <div class="user-wrapper" v-if="informationObj">
                    <div class="avatar-wrapper" @click="jumpTo('/account/personalInfo')">
                        <image class="avatar" :src="informationObj.headPortraitUrl ? informationObj.headPortraitUrl : imgPath('default_avatar.png')"></image>
                    </div>
                    <text class="username" @click="jumpTo('/account/personalInfo')">{{informationObj.nickname ? informationObj.nickname : '无昵称'}}</text>
                </div>
            </div>
            <div class="center-wrapper flex_row">
                <div class="task-wrapper">
                    <text class="title border-bottom-ebebeb">任务订单</text>
                    <div class="task-list flex_row">
                        <div class="taskStep flex_row">
                            <div class="step-item flex_row" @click="toTaskOrder(2)">
                                <image class="step-icon" :src="imgPath('receipt.png')"></image>
                                <text class="step-word">已接单</text>
                            </div>
                            <div class="line"></div>
                            <div class="step-item flex_row" @click="toTaskOrder(3)">
                                <image class="step-icon" :src="imgPath('during_task.png')"></image>
                                <text class="step-word">任务中</text>
                            </div>
                            <div class="line"></div>
                            <div class="step-item flex_row" @click="toTaskOrder(4)">
                                <image class="step-icon" :src="imgPath('finished.png')"></image>
                                <text class="step-word">已完成</text>
                            </div>
                        </div>
                        <div class="flex_row allOrder"  @click="toTaskOrder(0)">
                            <image class="step-icon" :src="imgPath('all_order.png')"></image>
                            <text class="step-word">全部订单</text>
                        </div>
                    </div>
                </div>
                <div class="function-list">
                    <div class="function-item flex_row item_height" @click="handleSettle">
                        <image class="item-icon" :src="imgPath('settle_authenticate.png')"></image>
                        <text class="item-name">入驻认证</text>
                        <div class="function-item flex_row">
                            <text class="settleStatus" v-if="informationObj" :class="[informationObj.type ? 'col_fecb01' : 'col_545c72']">{{filter(informationObj.type)}}</text>
                            <image class="arrow_right" :src="imgPath('arrow_right_small.png')"></image>
                        </div>
                    </div>
                    <div class="function-item flex_row border-bottom-ebebeb item_height" v-for="(item, index) in functionList" :key="index"
                         @click="jumpTo(item.path)">
                        <image class="item-icon" :src="imgPath(item.icon)"></image>
                        <text class="item-name">{{item.name}}</text>
                        <image class="arrow_right" :src="imgPath('arrow_right_small.png')"></image>
                    </div>
                    <div class="function-item flex_row item_height" @click="toInvoiceManage">
                        <image class="item-icon" :src="imgPath('invoice_manage.png')"></image>
                        <text class="item-name">发票管理</text>
                        <image class="arrow_right" :src="imgPath('arrow_right_small.png')"></image>
                    </div>
                    <div class="function-item flex_row item_height" @click="callService">
                        <image class="item-icon" :src="imgPath('contact_service.png')"></image>
                        <text class="item-name">联系客服</text>
                        <image class="arrow_right" :src="imgPath('arrow_right_small.png')"></image>
                    </div>
                </div>
            </div>
        </scroller>
        <NavBottom></NavBottom>
        <Dialog :show="showDialog" @close="hideDialog">
            <text class="dialog-title">泳衣库服务热线</text>
            <text class="phoneNumber">0595-82835151</text>
            <div class="callPhone-wrapper flex_row">
                <text class="callPhone" @click="handleCall">拨打电话</text>
            </div>
        </Dialog>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import NavBottom from '@/components/navBottom'
import Dialog from '@/components/dialog'
import { WxcLoading } from 'weex-ui'
import Nat from 'natjs'
import { userInformation, queryInvoice } from '@/api/user'
import { shopInfo } from '@/api/store'
const modal = weex.requireModule('modal')

export default {
  name: 'personalCenter',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: true, // loading
      entryType: null, // 入驻状态
      showDialog: false, // 显示对话框
      informationObj: null, // 信息对象
      settleList: ['泳装厂', '面料厂', '辅料厂', '设计师', '打版师', '样衣工', '裁床工', '临时工'],
      functionList: [ // 功能列表
        {
          icon: 'my_store.png',
          name: '商城订单',
          path: '/myorder/storeOrder'
        },
        {
          icon: 'store_order.png',
          name: '我的商城',
          path: '/store/saleStore'
        },
        {
          icon: 'my_collection.png',
          name: '我的收藏',
          path: '/mine/myCollection'
        },
        {
          icon: 'my_view.png',
          name: '我的浏览',
          path: '/mine/myView'
        },
        {
          icon: 'my_card.png',
          name: '我的银行卡',
          path: ''
        }
      ]
    }
  },
  mounted () {
    const that = this
    that.$api.get(userInformation, {}, (res) => {
      that.informationObj = res.data
      that.loadingShow = false
    }, () => {
      that.loadingShow = false
    }, true)
  },
  methods: {
    filter (type) {
      const that = this
      let str = ''
      if (!type) {
        str = '未入驻'
      } else if (type === '-1') {
        str = '审核中'
      } else {
        str = that.settleList[Number(type) - 1]
      }
      // let str = type ? that.settleList[Number(type) - 1] : '未入驻'
      return str
    },
    handleSettle () { // 入驻认证
      const that = this
      if (!that.informationObj.type) {
        that.$router.push('/settle')
        that.$router.push({
          path: '/settle',
          query: {
            tel: that.informationObj.phone
          }
        })
      }
    },
    jumpTo (path) { // 路由跳转
      const that = this
      if (!path) {
        modal.toast({
          message: '该功能暂未开放',
          duration: 0.8
        })
      } else {
        if (path === '/store/saleStore') {
          that.$api.get(shopInfo, {}, () => {
            that.$router.push('/store/saleStore')
          }, () => {}, true)
        } else {
          that.$router.push(path)
        }
      }
    },
    toTaskOrder (val) { // 跳转任务订单
      const that = this
      that.$router.push({
        path: '/mine/taskOrder',
        query: {
          value: val
        }
      })
    },
    toInvoiceManage () { // 跳转发票管理
      const that = this
      that.loadingShow = true
      that.$api.get(queryInvoice, {}, (res) => {
        that.loadingShow = false
        let path = ''
        if (res.data && res.data.id > 0) {
          path = '/invoice/invoiceDetail'
        } else {
          path = '/invoice/invoice'
        }
        that.$router.push(path)
      }, () => {
        that.loadingShow = false
      }, true)
    },
    callService () { // 联系客服
      this.showDialog = true
    },
    hideDialog () { // 关闭对话框
      this.showDialog = false
    },
    handleCall () { // 拨打电话
      Nat.call('0595-82835151')
    }
  },
  components: {
    NavBottom,
    Dialog,
    WxcLoading
  }
}
</script>

<style scoped>
    .col_fecb01 {
        color: #fecb01;
    }
    .col_545c72 {
        color: #545c72;
    }
    .item_height {
        height: 100px;
        line-height: 100px;
    }
    .border-bottom-ebebeb {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .flex_row {
        flex-direction: row;
    }
    .personalCenter-wrapper {
        background-color: #f5f5f5;
    }
    .scroll {
        padding-bottom: 130px;
    }
    .info-wrapper {
        height: 416px;
        /*padding-top: 72px;*/
        /*padding-bottom: 48px;*/
        /*background-color: #2C2E36;*/
    }
    .info-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 750px;
        height: 416px;
    }
    .setting {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 42px;
        height: 42px;
    }
    .notice {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }
    .user-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        width: 750px;
        height: 416px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .avatar-wrapper {
        width: 200px;
        height: 200px;
        margin-top: 110px;
        margin-bottom: 24px;
        padding-left: 4px;
        padding-right: 4px;
        padding-top: 4px;
        padding-bottom: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: #fff;
        background-color: #2b3040;
        border-radius: 100px;
    }
    .avatar {
        width: 190px;
        height: 190px;
        border-radius: 95px;
    }
    .username {
        width: 750px;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }
    .center-wrapper {
        flex-wrap: wrap;
        padding-left: 24px;
        padding-right: 24px;
    }
    .task-wrapper {
        width: 702px;
        margin-top: 24px;
        border-width: 1px;
        border-style: solid;
        border-color: #ebebeb;
        border-radius: 10px;
        background-color: #fff;
    }
    .title {
        padding-left: 24px;
        padding-right: 24px;
        font-size: 28px;
        font-weight: bold;
        line-height: 88px;
    }
    .task-list {
        width: 702px;
        height: 158px;
        padding-top: 24px;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 16px;
        /*justify-content: space-between;*/
    }
    .taskStep {
        width: 450px;
        /*flex-wrap: wrap;*/
        justify-content: space-between;
    }
    .step-item {
        width: 90px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .step-icon {
        width: 68px;
        height: 68px;
    }
    .line {
        width: 90px;
        height: 1px;
        margin-top: 32px;
        background-color: #fecb01;
    }
    .step-word {
        /*width: 90px;*/
        margin-top: 12px;
        font-size: 26px;
        color: #464646;
    }
    .function-list {
        width: 702px;
        margin-top: 24px;
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 16px;
        padding-bottom: 16px;
        border-width: 1px;
        border-style: solid;
        border-color: #ebebeb;
        background-color: #fff;
        border-radius: 10px;
    }
    .function-item {
        align-items: center;
    }
    .item-icon {
        width: 44px;
        height: 44px;
        margin-right: 24px;
    }
    .item-name {
        flex: 1;
        font-size: 28px;
        color: #545c72;
    }
    .settleStatus {
        font-size: 26px;
        color: #fecb01;
    }
    .arrow_right {
        width: 36px;
        height: 36px;
        margin-left: 24px;
    }
    .dialog-title {
        font-size: 28px;
        text-align: center;
        color: #464646;
        font-family: medium;
    }
    .phoneNumber {
        margin-top: 60px;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
    }
    .callPhone-wrapper {
        margin-top: 50px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .callPhone {
        width: 278px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        border-radius: 8px;
        background-color: #2b3040;
    }
    .allOrder {
        width: 151px;
        margin-left: 30px;
        padding-left: 30px;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #ebebeb;
        flex-wrap: wrap;
        justify-content: center;
    }
</style>
